<template>
  <div class="editor-container">
    <div class="material-container">
      <material />
    </div>
    <div class="simulator-container">
      <simulator-top v-model="data" />
      <simulator v-model="data" />
    </div>
    <div class="operate-container">
      <operating-area class="operating-area" />
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue';
  import material from './components/material/material';
  import simulator from './components/simulator/simulator';
  import simulatorTop from './components/simulator-top/simulator-top';
  import operatingArea from './components/operating-area/operating-area';
  import { data as res } from '@/data';
  const data = ref(res);
</script>
<style scoped lang="less">
  .editor-container {
    display: flex;
    height: 100%;
    background: #efefef;
    .material-container {
      width: 240px;
      border: 1px solid #ccc;
      overflow-y: auto;
      flex-shrink: 0;
    }
    .simulator-container {
      width: calc(100vw - 240px - 300px);
      background: #eee;
    }
    .operate-container {
      width: 300px;
      border: 1px solid #efefef;
      flex-shrink: 0;
      padding: 10px;
      background: #fff;
    }
  }
</style>
